<template>
    <div class="flex-col justify-between" style="height: 100%">
        <n-form
            style="margin-top: 24px"
            ref="formRef"
            :model="form"
            :rules="rules"
            label-placement="top"
            label-width="120"
            require-mark-placement="right-hanging"
        >

            <n-form-item label="名称" path="name">
                <n-input v-model:value="form.name" placeholder="请输入名称"></n-input>
            </n-form-item>
            <n-form-item label="编码" path="sn">
                <n-input v-model:value="form.sn" placeholder="请输入编码" :on-input="handleInput"></n-input>
            </n-form-item>
            <n-form-item label="介绍" path="">
                <n-input v-model:value="form.briefInfo" type="textarea" style="min-height: 200px"
                         placeholder="请输入介绍"></n-input>
            </n-form-item>
        </n-form>
        <div class="flex justify-center">
            <jb-btn type="primary" @click="handleSubmit">提交-更新基础配置</jb-btn>
        </div>
    </div>


</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {JBoltApi} from '@/service/request'
import {useMessage} from 'naive-ui'
import emits from "vxe-table/lib/table/src/emits.js";

const message = useMessage()

const props = defineProps({
    appId: {
        type: String
    }
})


const formRef = ref(null)

const form = ref({
    id: '',
    name: '',
    sn: '',
    briefInfo: '',
})

const rules = {
    name: {
        required: true,
        message: '请输入名称',
        trigger: 'change'
    },
    sn: {
        required: true,
        message: '请输入编码',
        trigger: 'change'
    },
}
// 处理输入事件的函数
const handleInput = (value) => {
    // 定义正则表达式，只允许英文字母和数字
    const regex = /^[a-zA-Z0-9]*$/;
    if (regex.test(value)) {
        // 如果输入符合规则，更新输入框的值
        form.value.sn = value;
    } else {
        // 如果输入不符合规则，截取符合规则的部分
        form.value.sn = value.replace(/[^a-zA-Z0-9]/g, '');
    }
};


//------监听用户当前是否有更改的数据
const emit = defineEmits(['unSaveData', 'saveData']);
const oldForm = ref({
    id: '',
    name: '',
    sn: '',
    briefInfo: '',
})
// 深度比较两个对象
const hasChanges = () => {
    return JSON.stringify(oldForm.value) !== JSON.stringify(form.value);
};
//监听表单的值变化
watch(() => form.value, (newValue, oldValue) => {
    if (hasChanges() == false) {
        emit('saveData')
    } else {
        emit('unSaveData')
    }


}, {deep: true})

//------监听用户当前是否有更改的数据


async function handleSubmit(fun) {
    await formRef.value?.validate()
    let url = '/aiApp/update'
    JBoltApi.tryPost(url, form.value).then(res => {
        message.success("保存成功")
        emit('saveData');
        oldForm.value = {...form.value};//更新以后,要保证两个对象中的值一致

    }).catch((error) => {
        console.error(error)
    })

}

function loadEditData() {
    JBoltApi.tryGet(`/aiApp/getById/${props.appId}`).then(res => {
        form.value = {...res.data}
        oldForm.value = {...res.data}
    }).catch((error) => {
        console.error(error)
    })
}

onMounted(() => {
    if (props.appId) {
        loadEditData()
    }
})


</script>

<style scoped lang="scss">
</style>